<script setup lang='ts'>
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { useRoute } from "vue-router";
import { AppointmentList, RecordsList, Student } from '@/api/interfaceApi/params';
import { evaluationRecordsList, getAppointmentList, getStudentInfo } from '@/api/interfaceApi/https';

const activeName = ref('first');
const route = useRoute();
console.log(route.query);
let studentInfo = ref<Student>({});
const id =ref<string>(route.query.id);
getStudentInfo(id.value).then((res)=>{
    if (res.code === 200){
        studentInfo.value = res.data;
    }
});
let listParams = ref<AppointmentList>({
    pageNum: 1,
    pageSize: 5,
    stuNum:route.query.stuNum,
});
let appointmentList = ref([]);
// 总条数
let total = ref<number>();
function renderAppointmentList(){
    getAppointmentList(listParams.value).then((res)=>{
        if (res.code === 200){
            total.value = res.total;
            appointmentList.value = res.rows;
        }
    });
}
renderAppointmentList();
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
};
//
const params = ref<RecordsList>({
    pageSize:10,
    pageNum:1,
    studentId:id.value
});
let tabelData = ref([])
let recordTotal = ref<number>();
function renderList(){
    evaluationRecordsList(params.value).then((res)=>{
        if (res.code === 200) {
            tabelData.value = res.rows;
            recordTotal.value = res.total;
        }
    })
}
renderList();
const handleCurrentChange = (val: number) => {

    listParams.value.pageNum = val;
    renderAppointmentList();
};
const handleRecordChange = (val:number)=>{
    params.value.pageNum = val;
    renderList();
}
//获取测评记录
</script>

<template>
<div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style='margin: 40px; font-size: 20px;'>
        <el-tab-pane label="学生信息" name="first">
            <el-descriptions title="学生信息" border :column='3'>
                <el-descriptions-item  label="姓名">{{studentInfo.name}}</el-descriptions-item>
                <el-descriptions-item  label="年龄"></el-descriptions-item>
                <el-descriptions-item label="性别">{{studentInfo.gender==='1'?'男':studentInfo.gender==='2'?'女':studentInfo.gender}}</el-descriptions-item>
                <el-descriptions-item label="学历">
                    {{studentInfo.education}}
                </el-descriptions-item>
                <el-descriptions-item label="班级">
                    {{studentInfo.className}}
                </el-descriptions-item>
                <el-descriptions-item label="学号" style='text-align: center'>{{studentInfo.stuNum}}</el-descriptions-item>
                <el-descriptions-item label="手机号码" style='text-align: center'>{{studentInfo.phoneNumber}}</el-descriptions-item>
                <el-descriptions-item label="入学时间" align='center'>{{studentInfo.enrollmentTime}}</el-descriptions-item>
                <el-descriptions-item label=""></el-descriptions-item>
                <el-descriptions-item label="心理普测结果">{{studentInfo.psychometricTest}}</el-descriptions-item>
                <el-descriptions-item label="既往病史">{{studentInfo.anamnesis}}</el-descriptions-item>
                <el-descriptions-item label="心理诊断经历">{{studentInfo.experience}}</el-descriptions-item>
                <el-descriptions-item label="服药情况">{{studentInfo.medicationSituation}}</el-descriptions-item>
                <el-descriptions-item label="家庭情况">{{studentInfo.familyInfo}}</el-descriptions-item>
                <el-descriptions-item label="其他">{{studentInfo.remark}}</el-descriptions-item>
            </el-descriptions>

        </el-tab-pane>
        <el-tab-pane label="预约信息" name="second">
            <div v-if='total === 0'>
                <el-empty description="暂无预约信息" />
            </div>
            <div class='appointmentInfo' v-else>
                <el-descriptions  v-for='(item,index) in appointmentList'  :title="'预约信息'+((listParams.pageNum-1)*listParams.pageSize +(index+1))" :key='item.id' style='padding: 10px'>
                    <el-descriptions-item label="心理咨询师：" width='400'>{{item.psyTeacher.name}}</el-descriptions-item>
                    <el-descriptions-item label="咨询方式：" width='400'>{{item.mode}}</el-descriptions-item>
                    <el-descriptions-item label="咨询时间：" width='400'>{{ item.psyScheduling.date+' '+ item.psyScheduling.startTime+'--'+ item.psyScheduling.date+' '+ item.psyScheduling.endTime}}</el-descriptions-item>
                    <el-descriptions-item label="咨询内容：" :span='3'>
                    </el-descriptions-item>
                </el-descriptions>
                <div class='pagination'>
                    <el-pagination background layout="prev, pager, next" :total="total" @current-change='handleCurrentChange'/>
                </div>

            </div>
        </el-tab-pane>
        <el-tab-pane label="测评记录" name="third">
            <el-table :data='tabelData' style="width: 100%" border :cell-style="{ textAlign: 'center'}" :header-cell-style="{ textAlign: 'center'}">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column prop="psyAssessment.name" label="测试名称" />
                <el-table-column prop="score" label="分数" />
                <el-table-column prop="analysis" label="测评结果" />
                <el-table-column prop="createTime" label="测试时间" />
            </el-table>
            <div class='pagination' v-if='tabelData.length'>
                <el-pagination background layout="prev, pager, next" :total="recordTotal" @current-change='handleRecordChange'/>
            </div>
        </el-tab-pane>
    </el-tabs>
</div>
</template>

<style scoped lang='scss'>
::v-deep(.el-descriptions__header){
    background-color: #fafafa;
    padding: 10px;
    border: 1px solid #e6ebf5;
    border-bottom: 0;
    margin-bottom: 0;
}
::v-deep(.el-descriptions__body ){

    background-color: #fff;
}
::v-deep(.el-descriptions__body .el-descriptions__table) {
    border: 1px solid #f0f0f0;
}
::v-deep(.el-descriptions--medium.is-bordered .el-descriptions-item__cell){
    min-width: 100px;
    max-width: 240px;
    padding: 10px;
    border: 1px solid #e6ebf5;
    font-weight: 400;
    line-height: 1.5;
}
::v-deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
    text-align: center;
    color: #909399;
    background: #fafafa!important;
}
::v-deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
    text-align: center;
    color: #606266!important;
}
::v-deep(.appointmentInfo .el-descriptions__cell) {
    padding: 10px 6px;
    font-weight: 700;
}
::v-deep(.appointmentInfo .el-descriptions__label ) {
    margin-right: 0 !important;
    color: #606266!important;
}
.pagination {
    padding: 20px 0;
    float: right;
}
</style>
